<template>
    <e-charts v-if="!isEmpty" id="staff-echarts" class="chart-box" theme="ovilia-green" :options="echartsOptions" ref="myecharts"></e-charts>
    <div v-else class="empty">暂无数据</div>
</template>
<script>
import ECharts from 'vue-echarts/components/ECharts.vue'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/line'
export default {
  props: {
    datas: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      isEmpty: false,
      colors: [
        '#409EFF',
        '#78BAFF',
        '#1FD279',
        '#FFDB5F',
        '#FFA70D'
      ],
      echartsOptions: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          left: '4%',
          data: []
        },
        series: [
          {
            name: '所属公司',
            type: 'pie',
            center: ['75%', '50%'],
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      }
    }
  },
  components: {
    ECharts
  },
  created () {
    if (this.datas.length !== 0) {
      this.echartsOptions.legend.data = this.datas.map((item) => {
        return item.name
      })
      this.handleData(this.datas)
      this.loadEcharts()
    }
  },
  mounted () {
    window.addEventListener('resize', this.loadEcharts)
  },
  methods: {
    loadEcharts () {
      if (this.$refs['myecharts']) {
        setTimeout(() => {
          this.$refs['myecharts'].resize()
        }, 10)
      }
    },
    handleData (data) {
      this.echartsOptions.series[0].data = data
      window.localStorage.setItem('staffDatas', JSON.stringify(data))
      this.echartsOptions.formatter = function (name) {
        let datas = JSON.parse(window.localStorage.getItem('staffDatas'))
        let result = ''
        for (let i = 0, len = datas.length; i < len; i++) {
          if (datas[i].name === name) {
            result = name + '  ' + datas[i].number + '人  ' + datas[i].percentage
          }
        }
        return result
      }
      this.loadEcharts()
    },
    fileterData (data) {
      let total = data.reduce(function (prev, current) {
        return prev + current.number
      }, 0)
      return data.map((item, index) => {
        item.percentage = item.number ? Number((item.number / total) * 100).toFixed(2) + '%' : '0%'
        item.itemStyle = {color: this.colors[index] || ''}
        item.value = item.number
        return item
      })
    }
  },
  watch: {
    datas (val) {
      if (!val.length) {
        this.isEmpty = true
      } else {
        this.isEmpty = false
        this.echartsOptions.legend.data = val.map(item => {
          return item.name
        })
        this.handleData(this.fileterData(val))
      }
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.loadEcharts)
  }
}
</script>

<style lang="scss" scoped>
  #staff-echarts{
    width: 100%;
    border-top: 1px solid #F3F5F8;
    padding-top: 20px;
    height: 320px;
  }
  .empty{
    border-top: 1px solid #F3F5F8;
    height: 300px;
    display: flex;
    justify-content:center;
    align-items: center;
    font-size: 20px;
    color: #09f;
  }
</style>
